<!--
 * @Descripttion: 
 * @version: 
 * @Author: dudu
 * @Date: 2020-02-18 09:53:54
 * @LastEditors: dudu
 * @LastEditTime: 2020-03-05 16:01:56
 -->
<template>
  <div class="home">
    <div class="tableArea">
      <div>
        <cusTable :data="tableData"
                  sortable
                  :columns="tableHeaders"
                  :total="total"
                  :config="tableConfig"
                  :loading="loading"
                  @selectionChange="selectionChange"
                  @currentRowChange="currentRowChange"
                  @currentPageChange="currentPageChange"
                  @showDialog="showDialog">
          <template slot="action"
                    slot-scope="scope">
            <btnWrapper :owner="scope.row"
                        @handleClick="handleClick"
                        :btnConfig="tableConfig.actions" />
          </template>
        </cusTable>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import cusTable from '@/components/cusTable'
import btnWrapper from '@/components/btnWrapper'
import { tableData } from './tableData'

let tableConfig = {
  showAction: true,
  showSelection: true,
  showCurrentRow: true,
  showLoading: true,
  tableHeight: 400,
  sortable: true,
  actions: [
    {
      label: '编辑',
      name: 'edit',
      type: 'primary'
    },
    {
      label: '浏览',
      name: 'view',
      type: 'primary'
    },
    {
      label: '删除',
      name: 'delete',
      type: 'danger'
    }
  ]
}

export default {
  name: "home",
  components: {
    cusTable,
    btnWrapper
  },
  data () {
    return {
      tableHeaders: [
        { code: "index", name: "序号", width: 100 },
        {
          code: "grade",
          name: "年级",
          width: 180,
          type: 'dialogInput',
          config: {
            placeholder: '请选择班级'
          }
        },
        { code: "class", name: "班级", width: 140, type: 'select', config: { options: [{ name: '一班', code: 0 }, { name: '二班', code: 1 }, { name: '三班', code: 2 }] } },
        { code: "group", name: "小组", width: 140, type: 'select', config: { options: [{ name: '第一小组', code: 0 }, { name: '第二小组', code: 1 }, { name: '第三小组', code: 2 }] } },
        { code: "sex", name: "性别", width: 140, type: 'radio', config: { options: [{ name: '女', code: 0 }, { name: '男', code: 1 }] } },
        { code: "name", name: "姓名", width: 100 },
        { code: "remark", name: '备注', width: 140, type: 'input', config: { placeholder: '请输入备注' } },
        { code: "date", name: '入职时间', width: 250, type: 'datePicker', config: { placeholder: '请选择时间', sortMethod: () => { } } }
      ],
      tableData: [],
      loading: false,
      total: 18,
      tableConfig
    };
  },
  methods: {
    //点击操作项
    handleClick (row, btn) {
      console.log(row, btn)
    },
    //切换分页
    currentPageChange (page) {
      this.loading = true
      setTimeout(() => {
        if (page === 1) {
          this.tableData = tableData.slice(0, 10)
        } else if (page === 2) {
          this.tableData = tableData.slice(11)
        }
        this.loading = false
      }, 1000)
    },
    // 切换选中项
    selectionChange (val) {
      console.log(val)
    },
    //切换选中行
    currentRowChange (row) {
      console.log(row)
    },
    //点击了表内弹窗
    showDialog (row) {
      this.$message.success({
        message: '打开弹窗'
      })
    }
  },
  mounted () {
    this.loading = true
    setTimeout(() => {
      this.currentPageChange(1)
    }, 1000)
  }
};
</script>
<style>
.tableArea {
  display: flex;
}
.tableArea > div {
  width: 1200px;
}
</style>
